<template>
  <!-- Bid -->
  <div>
    <el-dialog v-el-drag-dialog :visible.sync="BidDialog" width="80%">
      <el-card style="height:500px; overflow: auto;width: 100%;">
        <!-- 信息搜索框 -->
        <el-form v-model="queryObj" label-width="120px" size="large">
          <el-row>
            <el-col :span="6">
              <el-form-item label="supplierName">
                <el-input v-model.trim="queryObj.supplierName" placeholder="supplierName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="remark">
                <el-input v-model.trim="queryObj.remark" placeholder="remark" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="total">
                <el-input v-model.trim="queryObj.total" placeholder="total" />
              </el-form-item>
            </el-col>
            <el-col v-show="isopen" :span="6">
              <el-form-item label="dueCycle">
                <el-input v-model.trim="queryObj.dueCycle" placeholder="dueCycle" />
              </el-form-item>
            </el-col>
            <el-col v-show="isopen" :span="6">
              <el-form-item label="inviteId">
                <el-input v-model="queryObj.inviteId" placeholder="inviteId" />
              </el-form-item>
            </el-col>
            <searchbutton
              :isopen="isopen"
              @isopenclickfn="isopenclick"
              @resetQueryfn="resetQuery"
              @queryClickfn="queryClick"
            />
          </el-row>
        </el-form>
        <!-- 调整状态按钮 -->
        <el-row style="margin-bottom: 10px">
          <div style="float: left">
            <el-button type="primary" plain @click="AddBidClick">
              <i class="el-icon-plus" /> 添加Bid
            </el-button>
          </div>
          <div style="float: right" />
        </el-row>

        <!-- 任务总表 -->
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableData"
          border
          height="600px"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          style="width: 100%;  margin-bottom: 10px;"
        >
          <el-table-column width="100" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="editClick(scope.row)"
              >{{ $t('button.Edit') }}</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteClick(scope.row)"
              >{{ $t('button.Delete') }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="supplierName" label="supplierName" align="center" />
          <el-table-column prop="remark" label="remark" align="center" />
          <el-table-column prop="total" label="total" align="center" />
          <el-table-column prop="dueCycle" label="dueCycle" align="center" />
          <el-table-column prop="inviteId" label="inviteId" align="center" />
          <el-table-column prop="bidResult" label="bidResult" align="center">
            <template slot-scope="scope">{{ scope.row.bidResult?'启用':"禁用" }}</template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <paging
          style="margin-right:30px"
          :pagion-obj="pagionObj"
          :handle-size-change="handleSizeChange"
          :handle-page-change="handlePageChange"
        />
      </el-card>
    </el-dialog>
    <!-- 新增Email配置 -->
    <el-dialog top="3vh" width="500px" :before-close="AddBidClose" :visible.sync="AddBidDialog">
      <el-form ref="AddBid" :model="AddBidData" size="small" label-width="120px">
        <el-form-item label="supplierName">
          <el-input v-model.trim="AddBidData.supplierName" placeholder="supplierName" />
        </el-form-item>
        <el-form-item label="remark">
          <el-input v-model.trim="AddBidData.remark" placeholder="remark" />
        </el-form-item>
        <el-form-item label="total">
          <el-input v-model.trim="AddBidData.total" placeholder="total" />
        </el-form-item>
        <el-form-item label="dueCycle">
          <el-input v-model.trim="AddBidData.dueCycle" placeholder="dueCycle" />
        </el-form-item>
        <el-form-item label="inviteId">
          <el-input v-model="AddBidData.inviteId" placeholder="inviteId" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="medium"
            @click="AddBidConfirm"
          >{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="AddBidClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑bid配置 -->
    <el-dialog top="3vh" width="500px" :before-close="editBidClose" :visible.sync="editBidDialog">
      <el-form ref="editBid" :model="editBidData" size="small" label-width="120px">
        <el-form-item label="supplierName">
          <el-input v-model.trim="editBidData.supplierName" placeholder="supplierName" />
        </el-form-item>
        <el-form-item label="remark">
          <el-input v-model.trim="editBidData.remark" placeholder="remark" />
        </el-form-item>
        <el-form-item label="total">
          <el-input v-model.trim="editBidData.total" placeholder="total" />
        </el-form-item>
        <el-form-item label="dueCycle">
          <el-input v-model.trim="editBidData.dueCycle" placeholder="dueCycle" />
        </el-form-item>
        <el-form-item label="inviteId">
          <el-input v-model="editBidData.inviteId" placeholder="inviteId" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="medium"
            @click="editBidConfirm"
          >{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="editBidClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { Bidding, GetBid, UpdateBid, DeleteBid } from '@/api/SRM'
import elDragDialog from '@/components/el-drag-dialog' // base on element-ui
import { Message } from 'element-ui'
import permission from '@/permission/index.js' // 权限判断指令
export default {
  name: 'Bid',
  directives: { permission, elDragDialog },
  data() {
    return {
      // 查询数据
      queryObj: {
        page: 0,
        size: 0,
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      },
      // 分页的数据
      pagionObj: {
        size: 50,
        currentPage: 1,
        total: 100
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      // 时间的数据
      timestart_end: [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      BidDialog: false,
      // 列位置是否显示
      deleteCell: {
        supplierName: true,
        remark: true,
        total: true,
        dueCycle: true,
        inviteId: true,
        bidResult: true
      },
      // excel 数据的key 表头数据
      headersArr: [
        'supplierName',
        'remark',
        'total',
        'dueCycle',
        'inviteId',
        'bidResult'
      ],
      // 将表头转换成中文
      headersRelations: {
        supplierName: 'supplierName',
        remark: 'remark',
        total: 'total',
        dueCycle: 'dueCycle',
        inviteId: 'inviteId',
        bidResult: 'bidResult'
      },
      // 新增Email配置的数据及弹窗
      AddBidDialog: false,
      AddBidData: {
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      },
      // 编辑Email配置的数据及弹窗
      editBidDialog: false,
      editBidData: {
        id: 0,
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      }
    }
  },
  mounted() {
    this.queryData()
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true
      this.queryObj.size = this.pagionObj.size
      this.queryObj.page = this.pagionObj.currentPage
      const res = await GetBid(this.queryObj)
      this.tableData = res.data.data
      this.pagionObj.pageCount = res.data.pageCount
      this.pagionObj.total = res.data.count
      this.listLoading = false
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1
      this.queryData()
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val
      this.queryData()
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val
      this.queryData()
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0]
        this.queryObj.endTime = this.timestart_end[1]
      } else {
        this.queryObj.startTime = null
        this.queryObj.endTime = null
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },
    // 重置
    resetQuery() {
      this.queryObj.supplierName = ''
      this.queryObj.remark = ''
      this.queryObj.total = 0
      this.queryObj.dueCycle = 0
      this.queryObj.inviteId = 0
      this.timestart_end = []
    },
    //
    BidClick() {
      this.BidDialog = true
    },
    // 新增Email配置
    AddBidClick() {
      this.AddBidDialog = true
      this.AddBidData = {
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      }
    },
    // 新增Email配置确认
    async AddBidConfirm() {
      await Bidding({
        supplierName: this.AddBidData.supplierName,
        remark: this.AddBidData.remark,
        total: this.AddBidData.total,
        dueCycle: this.AddBidData.dueCycle,
        inviteId: this.AddBidData.inviteId
      })
      Message.success('操作成功')
      this.queryData()
      this.AddBidDialog = false
    },
    // 新增Email配置关闭
    AddBidClose() {
      this.AddBidData = {
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      }
      this.AddBidDialog = false
    },
    // 编辑
    editClick(data) {
      this.editBidData.id = data.id
      this.editBidData.supplierName = data.supplierName
      this.editBidData.remark = data.remark
      this.editBidData.total = data.total
      this.editBidData.dueCycle = data.dueCycle
      this.editBidData.inviteId = data.inviteId
      this.editBidDialog = true
    },
    // 编辑的确认
    async editBidConfirm() {
      await UpdateBid(this.editBidData)
      Message.success('操作成功')
      this.queryData()
      this.editBidDialog = false
    },
    // 编辑弹窗关闭
    editBidClose() {
      this.editBidData = {
        id: 0,
        supplierName: '',
        remark: '',
        total: 0,
        dueCycle: 0,
        inviteId: 0
      }
      this.editBidDialog = false
    },
    // 删除
    deleteClick(data) {
      this.$confirm('确认删除当前Bid吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await DeleteBid({ id: data.id })
          this.queryData()
          Message.success('操作成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
</style>
